// 添加代发职位
<template>
  <div class="container">
    <el-form :model="jobForm" :rules="rules" ref="jobForm" label-width="100px" class="jobForm">
      <el-form-item label="所属企业：" prop="companyName">
        <el-input v-model="jobForm.companyName" placeholder="请输入所属企业"></el-input>
        <!-- <el-autocomplete class="inline-input" v-model="jobForm.companyName" :fetch-suggestions="querySearch"
          placeholder="请输入所属企业" @select="((item)=>handleSelect(item))" @input="selectVal">
        </el-autocomplete> -->
      </el-form-item>
      <el-form-item label="企业行业：" prop="companyTrade">
        <HYSelect :value="jobForm.companyTrade" @parentEvent="getHYChild" ref="HYDome" :type="1">
        </HYSelect>
        <!-- <el-cascader :options="options.companyTrade" :props="{value:'code', label:'name',children:'childVo'}"
          @change="cascader" :show-all-levels="true" v-model="jobForm.companyTrade" placeholder='请输入企业行业'></el-cascader> -->
      </el-form-item>
      <el-form-item label="到期时间：" prop="expireTime">
        <el-date-picker type="date" placeholder="请选择到期时间" v-model="jobForm.expireTime"
          value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="职位名称：" prop="name">
        <el-input v-model="jobForm.name" placeholder="请输入职位名称"></el-input>
      </el-form-item>
      <el-form-item label="职位状态：" prop="status">
        <el-radio-group v-model="jobForm.status">
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="2">审核未通过</el-radio>
          <el-radio :label="3">暂停招聘</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="职位性质：" prop="nature">
        <el-radio-group v-model="jobForm.nature" @change="currentNature">
          <el-radio :label="62">全职</el-radio>
          <el-radio :label="63">兼职</el-radio>
          <el-radio :label="64">实习</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="招聘人数：" prop="recruitNum">
        <el-input v-model.number="jobForm.recruitNum" style="width:100px" placeholder="请输入招聘人数"></el-input>&nbsp;&nbsp;人
      </el-form-item>
      <el-form-item label="职位类别：" prop="category">
        <el-cascader :options="options.category" :props="{value:'code', label:'name',children:'childVo'}"
          @change="cascader" :show-all-levels="true" v-model="jobForm.category" placeholder='请输入职位类别'></el-cascader>
      </el-form-item>
      <el-form-item label="工作区域：" prop="workArea">
        <el-cascader ref="cascaderAddr" :options="options.workArea"
          :props="{value:'code',label:'name',children:'childVo',checkStrictly:true}" @change="domicilePlaceclick"
          :show-all-levels="false" v-model="jobForm.workArea" placeholder="请选择工作区域"></el-cascader>
      </el-form-item>

      <el-form-item label="学历要求：" prop="education">
        <XLSelect :value="jobForm.education" @parentEvent="getXLChild" ref="XLDome"></XLSelect>
        <!-- <el-select v-model="jobForm.education" placeholder="学历要求">
          <el-option v-for="item in educationOptions" :label="item.name" :value="item.val" :key="item.val"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="工作经验：" prop="workExp">
        <el-select v-model="jobForm.workExp" placeholder="工作经验">
          <el-option v-for="item in workExpOptions" :label="item.name" :value="item.val" :key="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄要求：" prop="minAge">
        <el-input v-model.number="jobForm.minAge" style="width:100px" placeholder="年龄"></el-input>-
        <el-input v-model.number="jobForm.maxAge" style="width:100px" placeholder="年龄" ref="maxAge"></el-input>
        &nbsp;
      </el-form-item>
      <el-form-item label="薪资待遇：" prop="minWage">
        <el-input v-model.number="jobForm.minWage" style="width:100px" placeholder="薪资待遇"></el-input>-
        <el-input v-model.number="jobForm.maxWage" style="width:100px" placeholder="薪资待遇"></el-input>&nbsp;
        <!-- 兼职的情况下 -->
        <el-select v-if="this.jobForm.nature == 63" v-model="jobForm.wageType" label="薪资待遇" style="width:90px">
          <el-option v-for="(item, index) in wageOptions1" :label="item.label" :value="item.value" :key="index">
          </el-option>
        </el-select>
        <!-- 全职或者实习期情况下 -->
        <el-select v-else v-model="jobForm.wageType" label="薪资待遇" style="width:90px">
          <el-option v-for="(item, index) in wageOptions2" :label="item.label" :value="item.value" :key="index">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="职位描述：">
        <div style="min-width:500px;">
          <tinymce v-model="jobForm.describe" :height="300" />
        </div>
      </el-form-item>
      <el-form-item label="工作地点：" class="address" prop='workPlace'>
        <el-input v-model="jobForm.workPlace" placeholder="工作地点" style="width:215px"></el-input>
        <el-button type="text" @click="dialogMap=true">地图选点</el-button>
      </el-form-item>

      <el-form-item label="职位亮点：">
        <p class="job_highlight">
          <span class="welfare">增加公司标签，提升公司诱人指数 (最多可选择 8 个) </span> <span class="esitTag" @click="esitTag">&nbsp;
            <img src="../../../../assets/img/add_tag.png" alt=""> 修改标签</span>
        </p>
        <div class="tag-group">
          <el-tag v-for="(item,index) in allure" :key="index" effect="plain">
            {{ item.name }}
          </el-tag>
        </div>
      </el-form-item>

      <div class="underLine">
        <span>联系</span>方式
      </div>
      <el-form-item label="联系人：" prop="contact">
        <el-input hide-required-asterisk="true" v-model="jobForm.contact" style="width:215px" maxlength="20"
          placeholder="请输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        <el-input v-model.trim="jobForm.phone" style="width:215px" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="固定电话：" prop="tel">
        <el-input v-model="jobForm.tel" style="width:215px" placeholder="请输入座机">
        </el-input>
        <!-- <p v-show="telFlag" class="el-form-item__error">{{telText}}</p> -->
      </el-form-item>
      <el-form-item label="联系邮箱：" prop="mail">
        <el-input v-model="jobForm.mail" style="width:215px" placeholder="请输入联系邮箱"></el-input>
      </el-form-item>
      <el-form-item label="职位排序" prop="resumeNo">
        <el-input v-model.number="jobForm.resumeNo" style="width:215px" placeholder="请输入职位排序"></el-input>&nbsp;
        <span>职位排序为企业详情内，职位排列顺序，可填写1~300内，1为排在前，300为排在后</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('jobForm')">添加保存</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogMap" width="30%" :show-close='false' class="dialog">
      <span slot='title'>请确认工作地址</span>
      <maps @listenEvent="getLngLat" :address='jobForm.workPlace' :lat='jobForm.lat' :lng='jobForm.lng' ref='HeighMap'
        @handleClose='getDialogMap'>
      </maps>
    </el-dialog>
    <!-- 职位亮点组件 -->
    <Job-highlight :esitTagBoolean="esitTagBoolean" @close="close" @confirmHaveTag="confirmHaveTag" :allure="allure">
    </Job-highlight>
  </div>
</template>
<script>
// 引入地图选点
import maps from '../../../common/Map.vue';
// 引入职位亮点组件
import JobHighlight from '../../JobFair/components/setCompanylabel'
import { findTradeDict } from '../../../../api/index.js';
import { education, work_exp, work_area, getTrade, releaseJob } from '../../../../api/jobList.js'
import { selectbyname } from '../../../../api/JobFair.js'
import Tinymce from '../../../common/Tinymce' // 引入富文本
export default {
  data () {
    var minAge = (rule, value, callback) => {
      let minutes = this.$refs.maxAge.value;
      if (typeof value != 'number' || typeof minutes != 'number') {
        callback(new Error('请输入数字'));
      } else if (value < 16) {
        callback(new Error('年龄最小不得小于16岁'));
      } else if (value >= minutes) {
        callback(new Error('不能大于或等于最大值'));
      } else if (minutes > 60) {
        callback(new Error('年龄最大不得超过60岁'));
      } else {
        callback();
      }
    };
    var minWage = (rule, value, callback) => {
      if (value < 10) {
        callback(new Error('不能小于10'));
      } else if (value >= this.jobForm.maxWage) {
        callback(new Error('不能大于或等于最大值'));
      } else {
        callback();
      }
    };
    // var tel = (rule, value, callback) => {
    //   var reg = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,6})?$/;
    //   if (!reg.test(value)) {
    //     callback(new Error('请输入有效的电话！'));
    //   } else {
    //     callback();
    //   }
    // };
    var phone = (rule, value, callback) => {
      // 支持173、191、193、199、166、198、190、197、196、192、146、148开头的手机号
      var reg = /(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[5678]|19[0-9]|16[0-9])[0-9]{8}$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码！'));
      } else {
        callback();
      }
    };
    return {
      dialogMap: false,
      esitTagBoolean: false,
      // 选择今天及以后的时间
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
        },
      },
      // 表单信息
      jobForm: {
        // 所属企业
        companyName: '',
        // 企业行业
        companyTrade: [],
        // 到期时间
        expireTime: '',
        // 职位名称
        name: '',
        // 职位状态
        status: '',
        // 职位性质
        nature: '',
        // 职位类别
        category: [],
        // 工作区域
        workArea: [],
        // 学历
        education: '',
        workExp: '', // 工作经验
        minAge: '',
        maxAge: '',
        // 招聘人数
        recruitNum: 0,
        minWage: '',
        // 薪资
        wageType: 0,
        // 职位描述
        describe: '',
        // 工作地点
        workPlace: '',
        lat: '',
        lng: '',
        // 职位亮点
        allure: '',
        // 联系人
        contact: '',
        // 手机号码
        phone: '',
        // 座机
        tel: '',
        // 邮箱
        mail: '',
        jobType: 1,
        maxWage: '',
        // 职位排序
        resumeNo: ''
      },
      rules: {
        companyName: [
          { required: true, message: '请输入所属企业名称', trigger: 'blur' },
        ],
        companyTrade: [
          { required: true, message: '请选择企业行业', trigger: 'change' }
        ],
        expireTime: [
          { type: 'string', required: true, message: '请选择到期日期', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入职位名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        tel: [{ message: '请输入正确的电话号码', trigger: 'change', pattern: /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,6})?$/ }],
        category: [{ required: true, message: '请选择职位类别', trigger: 'change' }],
        recruitNum: [
          { required: true, message: '不能为空' },
          { type: 'number', message: '必须为数字值' }
        ],
        resumeNo: [
          { type: 'number', required: true, message: '输入职位必须为数字并且不能为空', trigger: 'blur' },
          { type: 'number', required: true, min: 1, max: 300, message: '职位排序范围在1~300之间', trigger: 'blur' }
        ],
        workPlace: [{ required: true, message: '工作地址不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }, { validator: phone }],
        // tel: [{ required: true, message: '电话号码不能为空', trigger: 'blur' }, { validator: tel }],
        contact: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
        mail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        minAge: [{ required: true, message: '不能为空' }, { validator: minAge }],
        workArea: [{ required: true, message: '请选择工作区域', trigger: 'change' }],
        minWage: [{ required: true, message: '不能为空' }, { type: 'number', message: '必须为数字值' }, { validator: minWage }],
        status: [{ required: true, message: '请选择职位状态', trigger: 'change' }],
        nature: [{ required: true, message: '请选择职位性质', trigger: 'change' }],
      },
      educationOptions: [],
      workExpOptions: [],
      wageOptions1: [
        {
          value: 0,
          label: '元/月'
        },
        {
          value: 1,
          label: '元/天'
        },
        {
          value: 2,
          label: '元/小时'
        }
      ],
      wageOptions2: [{ value: 0, label: '元/月' }],
      // 福利标签
      allure: [],
      options: {
        // 企业行业
        companyTrade: [],
        // 职位类别
        category: [],
        // 工作区域
        workArea: [],
      },
    }
  },
  created () {
    this.getJSON()
  },
  mounted () {

  },
  components: {
    maps,
    JobHighlight,
    Tinymce
  },
  methods: {
    // 初始化获取数据
    getJSON () {
      // 获取企业行业数据
      findTradeDict().then(res => {
        this.options.companyTrade = res.data;
      })
      // 学历
      education().then(res => {
        this.educationOptions = res.data;
      })
      // 工作经验
      work_exp().then(res => {
        this.workExpOptions = res.data;
        this.workExpOptions.unshift({
          code: 'work_exp',
          name: '无',
          val: ''
        });
      })
      // 获取工作区域数据
      work_area().then(res => {
        if (res.success) {
          this.options.workArea = res.data;
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
      // 获取职位类别
      getTrade().then(res => {
        this.options.category = res.data;
      })
    },
    getLngLat (params) {
      this.jobForm.lat = params.lat.toString();
      this.jobForm.lng = params.lng.toString();
    },
    domicilePlaceclick (e, form, thsAreaCode) {
      this.$refs.cascaderAddr.dropDownVisible = false;
    },
    getDialogMap (params) {
      this.dialogMap = params;
    },
    // ID 穿空
    selectVal (item) {
      this.jobForm.name = item
      this.jobForm.companyId = ''
    },
    // 选中的企业
    // handleSelect (item) {
    //   this.jobForm.companyId = item.id
    //   this.jobForm.name = item.name
    // },
    // 添加标签
    esitTag () {
      this.esitTagBoolean = true
    },
    // 关闭弹框
    close (val) {
      this.esitTagBoolean = val
      this.jobSelectionBoolean = val
    },
    // 设置公司标签事件
    confirmHaveTag (valTag) {
      this.close(false)
      this.allure = valTag
    },
    // 选择职业性质
    currentNature (val) {
      if (val !== 63) { // 全职或实习
        this.jobForm.wageType = 0;
      }
    },
    // 模糊检索
    // querySearch (queryString, callback) {
    //   var list = [{}];
    //   var formdata = new FormData();
    //   formdata.append('name', queryString)
    //   // 模糊查询企业名称
    //   selectbyname(formdata).then((res) => {
    //     if (res.success) {
    //       let datas = res.data
    //       datas.map((item, i) => {
    //         item.value = item.name;
    //       })
    //       this.restaurants = datas
    //       list = datas
    //       callback(list);
    //     } else {
    //       this.$message.error(res.msg)
    //     }
    //   })
    // },
    // 点击保存
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 添加
          this.addJob();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addJob () {
      let allureArr = []
      this.allure.map((item) => {
        allureArr.push(item.val)
      })
      this.jobForm.allure = JSON.stringify(allureArr) // .join(',')
      let query = {
        // 所属企业
        companyName: this.jobForm.companyName,
        // 企业行业
        companyTrade: JSON.stringify(this.jobForm.companyTrade),
        // 到期时间
        expireTime: this.jobForm.expireTime,
        // 职位名称
        name: this.jobForm.name,
        // 职位状态
        status: this.jobForm.status,
        // 职位性质
        nature: this.jobForm.nature,
        // 职位类别
        category: JSON.stringify(this.jobForm.category),
        // 工作区域
        workArea: JSON.stringify(this.jobForm.workArea),
        // 学历
        education: this.jobForm.education,
        workExp: this.jobForm.workExp, // 工作经验
        minAge: this.jobForm.minAge,
        maxAge: this.jobForm.maxAge,
        wageType: this.jobForm.wageType,
        jobType: 1,
        // 招聘人数
        recruitNum: this.jobForm.recruitNum,
        minWage: this.jobForm.minWage,
        maxWage: this.jobForm.maxWage,
        // 职位描述
        describe: encodeURI(this.jobForm.describe),
        // 工作地点
        workPlace: this.jobForm.workPlace,
        lat: this.jobForm.lat,
        lng: this.jobForm.lng,
        // 职位亮点
        allure: this.jobForm.allure,
        // 联系人
        contact: this.jobForm.contact,
        // 手机号码
        phone: this.jobForm.phone,
        // 座机
        tel: this.jobForm.tel,
        // 邮箱
        mail: this.jobForm.mail,
        resumeNo: this.jobForm.resumeNo
      }
      // 添加代发职位
      releaseJob(query).then(res => {
        if (res.success) {
          this.$message.success('代发职位发布成功!')
          this.$router.push('/jobList')
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    goBack () {
      window.history.back(-1);
      // this.$refs[formName].resetFields();
      // this.telFlag = false;
      // this.telText = '';
      // this.jobForm.tel = '';
    },
    cascader (val) {
      // console.log(val, '练级数据')
    },
    // <<< -------------------------- 子组件派发过来的事件 ------------------------------>>>
    // 获取子组件传过来的当前学历值
    getXLChild (cValue) {
      // 接收子组件传过来的值
      this.jobForm.education = cValue;
    },
    // 获取子组件传过来的当前行业值
    getHYChild (cValue) {
      // 接收子组件传过来的值
      this.jobForm.companyTrade = cValue;
    },
  }
}
</script>
<style scoped>
.el-input,
.el-cascader,
.el-select,
.el-textarea,
.el-autocomplete {
    width: 300px;
    /* margin-right: 10px; */
}
.address {
    margin-bottom: 30px;
}
.address /deep/ .el-button {
    position: absolute;
    top: 40px;
    left: 0;
}
.esitTag {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #0093ff;
}
.esitTag img {
    width: 13px;
    height: 13px;
    margin-right: 3px;
}
.tag-group .el-tag {
    margin-right: 20px;
}
/* 职位亮点 */
.job_highlight {
    display: flex;
    align-items: center;
}
/* 联系人样式 */
.underLine {
    padding-bottom: 5px;
    font-size: 14px;
}
.underLine span {
    border-bottom: 2px solid #1893fc;
}
</style>